<template>
  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" v-if="!updateActionDate.state" @click="toStartEdit">
        修改
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state" @click="toSaveEdit">
        保存
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state"
                @click="toCancelEdit"
      >
        返回
      </a-button>
    </template>

    <div class="table-page-search-wrapper">
      <a-card title="主页图片配置" :loading="loading">


        <a-form v-if="!(loading||updateActionDate.data==null)">
          <a-form-item>
            <template #label>
              <div
                style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                网站Logo
                <a-tooltip placement="right">
                  <template slot="title">
                    格式：png、jpeg、jpg<br/>
                    尺寸：400px * 400px<br/>
                    数量：一张
                  </template>
                  <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                </a-tooltip>
              </div>
            </template>
            <span v-if="updateActionDate.data.logo==null&&!updateActionDate.state">未上传图片</span>
            <a-upload
              list-type="picture-card"
              :file-list="logo"
              @preview="showLogoModal.state=true"
              :custom-request="handleUploadLogo"
              @change="handleLogoChange"
            >
              <div v-if="updateActionDate.state&&logo.length==0">
                <a-icon type="plus"/>
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
            <a-modal v-model:visible="showLogoModal.state" :footer="null">
              <img v-if="updateActionDate.data!=null&&updateActionDate.data.logo!=null"
                   :src="updateActionDate.data.logo">
            </a-modal>
          </a-form-item>
        </a-form>


        <a-modal v-model:visible="showPhotoData.state" v-if="showPhotoData.data!=null" @ok="submitModal"
                 @cancel="cancelModal">

          <video   controls alt="example" style="width: 100%" :src="showPhotoData.data.url" v-if="/^http?.+\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i.test(showPhotoData.data.url)&&showPhotoData.state"/>
          <img alt="example" style="width: 100%" :src="showPhotoData.data.url" v-else-if="showPhotoData.state">

          <a-form layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="图片描述" style="width: 100%;">
              <a-input v-model="showPhotoData.data.description" :read-only="!updateActionDate.state"></a-input>
            </a-form-item>
            <a-form-item label="图片跳转路由" style="width: 100%;">
              <a-input v-model="showPhotoData.data.redirectUrl" :read-only="!updateActionDate.state"></a-input>
            </a-form-item>
          </a-form>
        </a-modal>
        <a-form v-if="!(loading||updateActionDate.data==null)">
          <a-form-item>

            <template #label>
              <div
                style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                首页轮播图
                <a-tooltip placement="right">
                  <template slot="title">
                    格式：png、jpeg、jpg<br/>
                    尺寸：927px * 573px<br/>
                    数量：一张
                  </template>
                  <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                </a-tooltip>
              </div>
            </template>


            <a-upload
              list-type="picture-card"
              :file-list="updateActionDate.data.mainSlideshows"
              :showUploadList="{
                showPreviewIcon:true,
                showRemoveIcon:true
              }"
              @preview="openModal"
              :custom-request="handleUploadMainImages"
              @change="handleMainImagesChange"
            >
              <div v-if="updateActionDate.state">
                <a-icon type="plus"/>
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form>


        <a-form v-if="!(loading||updateActionDate.data==null)">
          <a-form-item>

            <template #label>
              <div
                style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                主页下面三个小Banner
                <a-tooltip placement="right">
                  <template slot="title">
                    格式：png、jpeg、jpg<br/>
                    尺寸：592px * 200px<br/>
                    数量：三张
                  </template>
                  <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                </a-tooltip>
              </div>
            </template>

            <a-upload
              list-type="picture-card"
              :file-list="updateActionDate.data.secondaryImages"
              @preview="openModal"
              :custom-request="handleUploadSecondaryImages"
              @change="handleSecondaryImagesChange"
            >
              <div v-if="updateActionDate.state&&updateActionDate.data.secondaryImages.length<3">
                <a-icon type="plus"/>
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item>
            <template #label>
              <div
                style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                主页左侧Banner
                <a-tooltip placement="right">
                  <template slot="title">
                    格式：png、jpeg、jpg<br/>
                    尺寸：460px * 200px<br/>
                    数量：二张
                  </template>
                  <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                </a-tooltip>
              </div>
            </template>

            <a-upload
              list-type="picture-card"
              :file-list="updateActionDate.data.sideImages"
              @preview="openModal"
              :custom-request="handleUploadSideImages"
              @change="handleSideImagesChange"
            >
              <div v-if="updateActionDate.state&&updateActionDate.data.sideImages.length<2">
                <a-icon type="plus"/>
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form>
        <a-form layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                v-if="!(loading||updateActionDate.data==null)">
          <a-row :gutter="48">
            <a-col :xs="24" :sm="12">
              <a-form-item style="width: 100%;" label="左上角文案">
                <a-input v-model="updateActionDate.data.leftText.text" :read-only="!updateActionDate.state"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item style="width: 100%;" label="左上角文案跳转链接">
                <a-input v-model="updateActionDate.data.leftText.url" :read-only="!updateActionDate.state"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item style="width: 100%;" label="右上角文案">
                <a-input v-model="updateActionDate.data.rightText.text" :read-only="!updateActionDate.state"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item style="width: 100%;" label="右上角文案跳转链接">
                <a-input v-model="updateActionDate.data.rightText.url" :read-only="!updateActionDate.state"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item style="width: 100%;" label="今日推荐商品的ID">
                <a-input v-model="updateActionDate.data.exampleGoodsId" :read-only="!updateActionDate.state"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <a-card title="主页自定义模块配置" :loading="loading" style="margin-top: 20px">
        <template #extra>
          <!--          <a-button type="primary" v-if="updateActionDate.state">添加</a-button>-->
        </template>
        <div v-if="!(loading||updateActionDate.data==null)">
          <div style="border-bottom: 1px solid #f0f2f5;padding: 10px 20px;"
               v-for="(module,index) in updateActionDate.data.selfDefineModules"
          >
            <a-form layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <div style="display:flex;flex-wrap: nowrap;flex-direction: row;">
                <a-col flex="auto">
                  <a-form-item label="模块标题">
                    <a-input v-model="module.title" :read-only="!updateActionDate.state"/>
                  </a-form-item>
                </a-col>
                <a-col>
                  <div style="margin-left: 10px;" v-if="updateActionDate.state">
                    <a-button shape="circle" @click="moduleUp(index)" icon="up"
                              :disabled="!updateActionDate.state||index==0"
                              style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
                    <a-button shape="circle" @click="moduleDown(index)" icon="down"
                              :disabled="!updateActionDate.state||index==updateActionDate.data.selfDefineModules.length-1"
                              style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
                    <a-button type="danger" @click="toDeleteModule(index)" :disabled="!updateActionDate.state"
                              style="margin-left: 5px;">点击删除
                    </a-button>
                  </div>
                </a-col>
              </div>
              <a-row>
                <a-col span="24">
                  <a-form-item label="模块描述">
                    <a-input v-model="module.description" :read-only="!updateActionDate.state"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="是否显示模块描述">
                    <span v-if="!updateActionDate.state">
                      {{ module.showDescription ? '是' : '否' }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.showDescription" :options="[{label:'是',value:true},{label:'否',value:false}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="模块类型">
                    <span v-if="!updateActionDate.state">
                      {{ ['列表', '大Banner', '轮播图'][module.labelState] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.labelState"
                      :options="[{label:'大Banner',value:1},{label:'列表',value:0},{label:'轮播图',value:2}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-if="module.labelState===1">
                <a-col style="display: flex;">
                  <div style="width: 80px">
                    板块图片:
                    <a-tooltip placement="right">
                      <template slot="title">
                        格式：png、jpeg、jpg<br/>
                        尺寸：1440px * 300px
                      </template>
                      <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                    </a-tooltip>
                  </div>
                  <a-upload
                    list-type="picture-card" :footer="null"
                    :file-list="transImgUrlToUploadType(module.blockStyle.imgUrl)"
                    @preview="showImage(module.blockStyle.imgUrl)"
                    :custom-request="handleSelfPageUpload(module.blockStyle)"
                    @change="(e)=>{removeItemImage(module.blockStyle,e)}"
                  >
                    <div v-if="updateActionDate.state&&module.blockStyle.imgUrl==null">
                      <a-icon type="plus"/>
                      <div class="ant-upload-text">
                        Upload
                      </div>
                    </div>
                  </a-upload>
                </a-col>
                <a-col>
                  <a-form-item label="跳转链接">
                    <a-input v-model="module.blockStyle.url" :read-only="!updateActionDate.state"/>
                  </a-form-item>
                </a-col>
                <a-col>
                  <a-form-item label="图片描述">
                    <a-input v-model="module.blockStyle.blockDescription" :read-only="!updateActionDate.state"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="是否显示描述">
                    <span v-if="!updateActionDate.state">
                      {{ module.blockStyle.showBlockDescription ? '是' : '否' }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.blockStyle.showBlockDescription"
                      :options="[{label:'是',value:true},{label:'否',value:false}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12" v-if="module.blockStyle.showBlockDescription">
                  <a-form-item label="模块类型">
                    <span v-if="!updateActionDate.state">
                      {{ {'center': '居中', 'left': '左对齐', 'right': '右对齐'}[module.blockStyle.descriptionPosition] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.blockStyle.descriptionPosition"
                      :options="[{label:'居中',value:'center'},{label:'左对齐',value:'left'},{label:'右对齐',value:'right'}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-else-if="module.labelState===0">
                <a-col style="display: flex;">
                  <div style="width: 120px">
                    板块图片:
                    <a-tooltip placement="right">
                      <template slot="title">
                        格式：png、jpeg、jpg<br/>
                        尺寸：400px * 400px
                      </template>
                      <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                    </a-tooltip>
                  </div>
                  <a-upload
                    list-type="picture-card" :footer="null"
                    :file-list="transImgUrlToUploadType(module.itemStyle.itemList)"
                    @preview="showItemImage"
                    :custom-request="(e) => {handleSelfPageItemPhotoUpload(module.itemStyle,e)}"
                    @change="(e) => {removeItemImage1(module.itemStyle,e)}"
                  >
                    <div v-if="updateActionDate.state">
                      <a-icon type="plus"/>
                      <div class="ant-upload-text">
                        Upload
                      </div>
                    </div>
                  </a-upload>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="电脑布局（width>768px）">
                    <span v-if="!updateActionDate.state">
                      {{ module.itemStyle.colGrid.computer }}
                    </span>
                    <a-input-number v-else v-model="module.itemStyle.colGrid.computer"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="手机布局（width<=768px）">
                    <span v-if="!updateActionDate.state">
                      {{ module.itemStyle.colGrid.phone }}
                    </span>
                    <a-input-number v-else v-model="module.itemStyle.colGrid.phone"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="是否显示卡片描述">
                    <span v-if="!updateActionDate.state">
                      {{ module.itemStyle.showItemDescription ? '是' : '否' }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.itemStyle.showItemDescription"
                      :options="[{label:'是',value:true},{label:'否',value:false}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12" v-if="module.itemStyle.showItemDescription">
                  <a-form-item label="卡片描述对齐方式">
                    <span v-if="!updateActionDate.state">
                      {{ {'center': '居中', 'left': '左对齐', 'right': '右对齐'}[module.itemStyle.descriptionPosition] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.itemStyle.descriptionPosition"
                      :options="[{label:'居中',value:'center'},{label:'左对齐',value:'left'},{label:'右对齐',value:'right'}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="卡片对齐方式">
                    <span v-if="!updateActionDate.state">
                      {{ {'center': '居中', 'flex-start': '左对齐', 'flex-end': '右对齐'}[module.itemStyle.colGrid.align] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.itemStyle.colGrid.align"
                      :options="[{label:'居中',value:'center'},{label:'左对齐',value:'flex-start'},{label:'右对齐',value:'flex-end'}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-else-if="module.labelState===2">
                <a-col style="display: flex;">
                  <div style="width: 120px">
                    板块图片:
                    <a-tooltip placement="right">
                      <template slot="title">
                        格式：png、jpeg、jpg<br/>
                        尺寸：400px * 400px
                      </template>
                      <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                    </a-tooltip>
                  </div>
                  <a-upload
                    list-type="picture-card" :footer="null"
                    :file-list="transImgUrlToUploadType(module.swiperStyle.itemList)"
                    @preview="showItemImage"
                    :custom-request="(e) => {handleSelfPageItemPhotoUpload(module.swiperStyle,e)}"
                    @change="(e) => {removeItemImage1(module.swiperStyle,e)}"
                  >
                    <div v-if="updateActionDate.state">
                      <a-icon type="plus"/>
                      <div class="ant-upload-text">
                        Upload
                      </div>
                    </div>
                  </a-upload>
                </a-col>
                <a-col :xs="24" :sm="12">
                  <a-form-item label="是否显示卡片描述">
                    <span v-if="!updateActionDate.state">
                      {{ module.itemStyle.showItemDescription ? '是' : '否' }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.swiperStyle.showItemDescription"
                      :options="[{label:'是',value:true},{label:'否',value:false}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12" v-if="module.swiperStyle.showItemDescription">
                  <a-form-item label="卡片描述对齐方式">
                    <span v-if="!updateActionDate.state">
                      {{ {'center': '居中', 'left': '左对齐', 'right': '右对齐'}[module.swiperStyle.descriptionPosition] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.swiperStyle.descriptionPosition"
                      :options="[{label:'居中',value:'center'},{label:'左对齐',value:'left'},{label:'右对齐',value:'right'}]"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12" v-if="module.swiperStyle.swiperType">
                  <a-form-item label="轮播图类型">
                    <span v-if="!updateActionDate.state">
                      {{ {'block': '板块', 'item': '条目'}[module.swiperStyle.swiperType] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.swiperStyle.swiperType"
                      :options="[{label:'板块',value:'block'},{label:'条目',value:'item'}]"/>
                  </a-form-item>
                </a-col>

                <a-col :span="12" v-if="module.swiperStyle.swiperType==='item'">
                  <a-form-item label="电脑布局（width>768px）">
                    <span v-if="!updateActionDate.state">
                      {{ module.swiperStyle.colGrid.computer }}
                    </span>
                    <a-input-number v-else v-model="module.itemStyle.colGrid.computer"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12" v-if="module.swiperStyle.swiperType==='item'">
                  <a-form-item label="手机布局（width<=768px）">
                    <span v-if="!updateActionDate.state">
                      {{ module.swiperStyle.colGrid.phone }}
                    </span>
                    <a-input-number v-else v-model="module.swiperStyle.colGrid.phone"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="12" v-if="module.swiperStyle.swiperType==='item'">
                  <a-form-item label="卡片对齐方式">
                    <span v-if="!updateActionDate.state">
                      {{ {'center': '居中', 'flex-start': '左对齐'}[module.swiperStyle.colGrid.align] }}
                    </span>
                    <a-radio-group
                      v-else
                      v-model="module.swiperStyle.colGrid.align"
                      :options="[{label:'居中',value:'center'},{label:'左对齐',value:'flex-start'}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="height: 200px;padding: 10px 20px;" v-if="updateActionDate.state">
            <div @click="addNewModule"
                 style="position: relative;width: 100%;height: 100%;text-align: center;background: #fafafa;border: 1px dashed #d9d9d9;border-radius: 4px;cursor: pointer;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
              <a-icon type="plus-circle" style="font-size: 40px" theme="twoTone"/>
              <div style="margin-top: 20px;font-size: 18px;font-weight: bold">点击添加板块</div>
            </div>
          </div>
        </div>

        <a-modal v-model:visible="showSelfDefinePhoto.state" v-if="showSelfDefinePhoto.imgUrl!=null">
          <img alt="example" style="width: 100%" :src="showSelfDefinePhoto.imgUrl"/>
        </a-modal>

        <a-modal v-model:visible="showSelfDefineItemPhoto.state" @ok="handleSelfDefineItemPhotoOk"
                 v-if="showSelfDefineItemPhoto.updateData!=null">
          <img alt="example" style="width: 100%" :src="showSelfDefineItemPhoto.updateData.imgUrl"/>
          <a-form-item label="图片描述" style="width: 100%;">
            <a-input v-model="showSelfDefineItemPhoto.updateData.description"
                     :read-only="!updateActionDate.state"></a-input>
          </a-form-item>
          <a-form-item label="图片跳转路由" style="width: 100%;">
            <a-input v-model="showSelfDefineItemPhoto.updateData.url" :read-only="!updateActionDate.state"></a-input>
          </a-form-item>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {addMainPage, searchMainPageLast} from "@/api/modules/MainPageRequest";
import {uploadPhoto} from "@/api/image";
import {notification} from "ant-design-vue";
import getOSSInfo from "@/api/OSSRequest";
import MultipartUpload from "@/utils/OSSUtils";

const exampleItemData = {}

export default {
  name: "MainPageConfig",
  data() {
    return {
      loading: false,
      showLogoModal: {
        state: false,
        data: null
      },
      updateActionDate: {
        state: false,
        data: null
      },
      showSelfDefinePhoto: {
        state: false,
        imgUrl: ''
      },
      showSelfDefineItemPhoto: {
        state: false,
        data: null,
        updateData: null
      },
      testData: [
        {
          title: '',
          description: '',
          showDescription: true,
          labelState: 0,//  0 列表 | 1 板块 | 2 轮播图
          itemStyle: {
            colGrid: {// 0 不显示该模块
              computer: 6, // >=768px
              phone: 2, // <768px
              align: 'flex-start'// flex-end space-around stretch
            },
            descriptionPosition: 'center',
            showItemDescription: true,
            itemList: []
          },
          swiperStyle: {
            colGrid: {// 0 不显示该模块
              computer: 6, // >=768px
              phone: 2, // <768px
              align: 'flex-start'// flex-end space-around stretch
            },
            descriptionPosition: 'center',
            showItemDescription: true,
            itemList: [],
            swiperType: 'block' // block | item
          },
          blockStyle: {
            imgUrl: null,
            url: '',
            description: '',
            showBlockDescription: true,
            descriptionPosition: 'center'// left center right
          }
        }
      ],
      data: null,
      showPhotoData: {
        state: false,
        data: null,
        orgData: null
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true;
      await this.refreshData()
      this.loading = false;
    },
    async refreshData() {
      let _this = this;
      await searchMainPageLast().then((res) => {
        res.data.leftText = JSON.parse(res.data.leftText)
        try {
          if (res.data.selfDefineModules == null || res.data.selfDefineModules.trim().length == 0) res.data.selfDefineModules = []
          else res.data.selfDefineModules = JSON.parse(res.data.selfDefineModules)
          res.data.selfDefineModules.forEach(e => {
            e.itemStyle.itemList = e.itemStyle.itemList.filter(e1 => {
              return e1 != null
            })
            e.swiperStyle.itemList = e.swiperStyle.itemList.filter(e1 => {
              return e1 != null
            })
          })
        } catch (e) {
          res.data.selfDefineModules = []
        }
        res.data.mainSlideshows = JSON.parse(res.data.mainSlideshows)
        res.data.mainSlideshows.forEach((value) => {
          value.uid = Math.random();
          value.name = ''
          value.status = 'done'
        })

        res.data.rightText = JSON.parse(res.data.rightText)

        res.data.secondaryImages = JSON.parse(res.data.secondaryImages)
        res.data.secondaryImages.forEach((value) => {
          value.uid = Math.random();
          value.name = ''
          value.status = 'done'
        })

        res.data.sideImages = JSON.parse(res.data.sideImages)
        res.data.sideImages.forEach((value) => {
          value.uid = Math.random();
          value.name = ''
          value.status = 'done'
        })

        _this.data = res.data;
        _this.updateActionDate.data = JSON.parse(JSON.stringify(_this.data))
      })
    },
    async toStartEdit() {
      this.updateActionDate.state = true;
    },
    async toCancelEdit() {
      this.updateActionDate.data = JSON.parse(JSON.stringify(this.data))
      this.updateActionDate.state = false;
    },
    async openModal(record) {
      this.showPhotoData.data = record;
      this.showPhotoData.orgData = JSON.parse(JSON.stringify(record));
      this.showPhotoData.state = true;
    },
    async cancelModal() {
      this.showPhotoData.data.imgUrl = this.showPhotoData.orgData.url;
      this.showPhotoData.data.url = this.showPhotoData.orgData.url;
      this.showPhotoData.data.description = this.showPhotoData.orgData.description;
      this.showPhotoData.state = true;
    },
    async submitModal() {
      this.showPhotoData.state = false;
    },
    handleMainImagesChange({fileList}) {
      if (!this.updateActionDate.state) return;

      this.updateActionDate.data.mainSlideshows = fileList.filter((value) => {
        return value.url != null
      });
    },
    async handleUploadMainImages(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      let a = e.file.name.split('.')
      let name = 'video/'+e.file.uid + '.' + a[a.length - 1]
      let p1 = {
        value: 0
      };

      let upload = new MultipartUpload({
          region: 'oss-cn-beijing',
          accessKeyId: 'LTAI5tJD9S29J6sUqKPdhDju',
          accessKeySecret: 'Y4RV9HVU9X8rtjbGB3suK0ShR0ydPN',
          bucket: 'jaupic',
        },
        e.file, name, p1)
      let resultUrl = {
        value: null
      }
      resultUrl.value=   'https://jaupic.oss-cn-beijing.aliyuncs.com/shopping/'+name;
      await upload.startToUpload(resultUrl,(p)=>{
        if(p!=1){
          this.$notification.info({
            key:resultUrl.value,
            message: '上传中',
            description:'进度: '+(p*100) +'%',
            duration:null,
          })
        }else{
          this.$notification.success({
            key:resultUrl.value,
            message: '上传成功',
            duration:5,
          })
        }
      });



      if (_this.updateActionDate.state) {
        if (_this.updateActionDate.data.mainSlideshows == null) {
          _this.updateActionDate.data.mainSlideshows = [{
            uid: Math.random(),
            name: '',
            status: 'done',
            url: resultUrl.value,
          }]
        } else {
          _this.updateActionDate.data.mainSlideshows = [..._this.updateActionDate.data.mainSlideshows, {
            uid: Math.random(),
            name: '',
            status: 'done',
            url: resultUrl.value,
          }]
        }
      }

      // result:
      //   AccessKeyId: "LTAI5tDTEMVnZaeE7H7H41wp"
      //   BucketName: "luxushopping"
      //   ExpireTime: 100
      //   Host: "oss-us-west-1.aliyuncs.com"
      //   Policy: "eyJleHBpcmF0aW9uIjoiMjAyMS0xMS0yNFQxMzoyMDoyMS43NDhaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJ2aWRlby9DYWNoZV80MmZiYTZlNDVhZDQzOGM0Li5qcGciXV19"
      //   Signature: "v0O9P2AScZoJnIClntCz46pab8k="
      // uploadPhoto(form).then((res) => {
      //   if (_this.updateActionDate.state) {
      //     if (_this.updateActionDate.data.mainSlideshows == null) {
      //       _this.updateActionDate.data.mainSlideshows = [{
      //         uid: Math.random(),
      //         name: '',
      //         status: 'done',
      //         url: res.data,
      //       }]
      //     } else {
      //       _this.updateActionDate.data.mainSlideshows = [..._this.updateActionDate.data.mainSlideshows, {
      //         uid: Math.random(),
      //         name: '',
      //         status: 'done',
      //         url: res.data,
      //       }]
      //     }
      //   }
      // })
      return false
    },
    handleSecondaryImagesChange({fileList}) {
      if (!this.updateActionDate.state) return;

      this.updateActionDate.data.secondaryImages = fileList.filter((value) => {
        return value.url != null
      });
    },
    handleUploadSecondaryImages(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        if (_this.updateActionDate.state) {
          if (_this.updateActionDate.data.secondaryImages == null) {
            _this.updateActionDate.data.secondaryImages = [{
              uid: Math.random(),
              name: '',
              status: 'done',
              url: res.data,
            }]
          } else {
            _this.updateActionDate.data.secondaryImages = [..._this.updateActionDate.data.secondaryImages, {
              uid: Math.random(),
              name: '',
              status: 'done',
              url: res.data,
            }]
          }
        }
      })
      return false
    },
    handleSideImagesChange({fileList}) {
      if (!this.updateActionDate.state) return;

      this.updateActionDate.data.sideImages = fileList.filter((value) => {
        return value.url != null
      });
    },
    handleUploadSideImages(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        if (_this.updateActionDate.state) {
          if (_this.updateActionDate.data.sideImages == null) {
            _this.updateActionDate.data.sideImages = [{
              uid: Math.random(),
              name: '',
              status: 'done',
              url: res.data,
            }]
          } else {
            _this.updateActionDate.data.sideImages = [..._this.updateActionDate.data.sideImages, {
              uid: Math.random(),
              name: '',
              status: 'done',
              url: res.data,
            }]
          }
        }
      })
      return false
    },
    async toSaveEdit() {
      if (this.updateActionDate.data.mainSlideshows.length == 0) {
        notification.warning({
          message: '请上传至少一张轮播图'
        })
        return;
      }
      if (this.updateActionDate.data.secondaryImages.length != 3) {
        notification.warning({
          message: '请确保有三张下方小banner'
        })
        return;
      }
      if (this.updateActionDate.data.sideImages.length != 2) {
        notification.warning({
          message: '请确保有两张右侧小banner'
        })
        return;
      }
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data))
      data.selfDefineModules.forEach(e => {
        e.itemStyle.itemList = e.itemStyle.itemList.filter(e1 => {
          return e1 != null
        })
        e.swiperStyle.itemList = e.swiperStyle.itemList.filter(e1 => {
          return e1 != null
        })
      })
      data.selfDefineModules = JSON.stringify(data.selfDefineModules)

      delete data.createAt;
      delete data.id;
      let _this = this;
      await addMainPage(data).then(async () => {
        _this.loading = true;
        await _this.refreshData();
        notification.success({
          message: '修改成功'
        })
        _this.updateActionDate.state = false;
        _this.loading = false;
      }).catch((res) => {
        notification.warning(res)
      })
    },
    showImage(imgUrl) {
      this.showSelfDefinePhoto.imgUrl = imgUrl;
      this.showSelfDefinePhoto.state = true;
    },
    showItemImage(img) {
      this.showSelfDefineItemPhoto.data = img.data;
      this.showSelfDefineItemPhoto.updateData = JSON.parse(JSON.stringify(img.data));

      this.showSelfDefineItemPhoto.state = true;
      console.log(this.showSelfDefineItemPhoto)
    },
    handleSelfDefineItemPhotoOk() {

      if (this.updateActionDate.state) {

        for (let updateDataKey in this.showSelfDefineItemPhoto.updateData) {
          this.showSelfDefineItemPhoto.data[updateDataKey] = this.showSelfDefineItemPhoto.updateData[updateDataKey]
        }
      }

      this.showSelfDefineItemPhoto.state = false;
    },
    moduleUp(index) {

      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.selfDefineModules[index - 1]))
      this.updateActionDate.data.selfDefineModules.splice(index - 1, 1, JSON.parse(JSON.stringify(this.updateActionDate.data.selfDefineModules[index])))
      this.updateActionDate.data.selfDefineModules.splice(index, 1, data)


    },
    moduleDown(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.selfDefineModules[index + 1]))
      this.updateActionDate.data.selfDefineModules.splice(index + 1, 1, JSON.parse(JSON.stringify(this.updateActionDate.data.selfDefineModules[index])))
      this.updateActionDate.data.selfDefineModules.splice(index, data)
    },
    toDeleteModule(index) {
      this.updateActionDate.data.selfDefineModules.splice(index, 1)
    },
    transImgUrlToUploadType(imgUrl) {
      if (imgUrl == null) {
        return []
      }
      if (typeof imgUrl == "string") {
        return [{
          uid: imgUrl,
          name: imgUrl,
          status: 'done',
          url: imgUrl,
        }]
      } else if (typeof imgUrl === "object") {
        let arr = []
        imgUrl.forEach(item => {
          if (typeof item === 'string') {
            arr.push({
              uid: imgUrl,
              name: imgUrl,
              status: 'done',
              url: item,
            })
          } else if (typeof item === 'object' && item.imgUrl != null && typeof item.imgUrl === 'string') {
            arr.push({
              uid: item.imgUrl,
              name: item.imgUrl,
              status: 'done',
              url: item.imgUrl,
              data: item
            })
          }
        })
        return arr;
      } else {
        return [];
      }
    },
    handleSelfPageUpload(item) {
      let _this = this;

      return (e) => {
        let form = new FormData();
        form.set('photo', e.file);
        uploadPhoto(form).then((res) => {
          if (_this.updateActionDate.state) {
            item.imgUrl = res.data;
          }
        })
      }
    },
    handleSelfPageItemPhotoUpload(item, e) {
      let _this = this;
      if (item.itemList == null) {
        item.itemList = []
      }
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        if (_this.updateActionDate.state) {
          console.log(item.itemList)
          item.itemList.push({
            imgUrl: res.data,
            url: null,
            description: null
          })
          console.log(item.itemList)
        }
      })
    },
    removeItemImage(item, e) {
      let _this = this;
      if (_this.updateActionDate.state) {
        if (e.fileList.length == 0) {
          item.imgUrl = null
        } else {
          item.imgUrl = e.fileList[0].url
        }
      }
    },
    removeItemImage1(item, e) {
      let _this = this;
      if (_this.updateActionDate.state) {
        let a = []
        console.log(e)
        e.fileList.forEach(e1 => {
          if (e1 != null) a.push(e1.data)
        })
        item.itemList = a;
      }
    },
    addNewModule() {
      this.updateActionDate.data.selfDefineModules.push(JSON.parse(JSON.stringify(this.testData[0])))
    },
    handleUploadLogo(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        if (_this.updateActionDate.state) {
          _this.updateActionDate.data.logo = res.data
        }
      })
      return false
    },
    handleLogoChange({fileList}) {
      if (!this.updateActionDate.state) return;
      if (fileList == null || fileList.length == 0 || fileList[0].url == null) {
        this.updateActionDate.data.logo = null
      } else {
        this.updateActionDate.data.logo = fileList[0].url
      }
    }
  },
  computed: {
    logo() {
      if (this.updateActionDate.data == null || this.updateActionDate.data.logo == null || this.updateActionDate.data.logo.trim().length == 0) {
        return []
      } else {
        return [
          {
            uid: this.updateActionDate.data.logo,
            name: this.updateActionDate.data.logo,
            url: this.updateActionDate.data.logo,
            done: 'done'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>